<template>
	<view class="container">
		<view class="main">
			<h2 style="margin-top:78rpx;line-height: 1;font-size: 48rpx;">{{title}}</h2>
			<p style="font-size: 28rpx;color: #969799;margin-top:40rpx;line-height: 1;">为了你的帐号安全，请用手机号登录</p>
			<u-form :model="form" ref="uForm">
				<u-form-item label="中国+86" prop="mobile">
					<u-input v-model="form.mobile" placeholder="请输入手机号" type="number" border="none" maxlength="11"
						clearable />
				</u-form-item>
				<u-form-item prop="pwd">
					<u-input v-model="form.pwd" :type="type" border="none" :password-icon="passwordIcon"
						:placeholder="switchmima" clearable />
					<span v-if="yanzhengma" @click="getcode" style="color: #3388ff;">获取验证码</span>
				</u-form-item>
				<u-button type="success" :custom-style="submitbutt" @click="login">登陆</u-button>
			</u-form>
			<view class="switch" style="color: #3388ff;font-size: 24rpx;padding:40rpx 0">
				<span v-if="!yanzhengma" @click="titleswitch">验证码登陆</span>
				<span v-else @click="titleswitch2">密码登陆</span>
				<u-toast ref="uToast"></u-toast>
				<p>
					<span v-if="!yanzhengma" style="margin-right: 20rpx;">忘记密码</span>
					
					<span @click="zhuce">免费注册</span>
				</p>
			</view>
		</view>

		<view class="footer">

			<view id="leftcheckbox" @click="switchflag" :class="{activebox:flag===true}">
				<u-icon name="checkbox-mark" size="17px" v-if="flag==true" color="white"></u-icon>
			</view>
			<view class="rightprops">
				<p style="color: #969799;font-size:24rpx;margin-left:8rpx;"> 阅读并同意 <span
						style="color: #3388ff;">《用户协议》</span> <span style="color: #3388ff;">《隐私政策》</span></p>
			</view>

		</view>
	</view>

</template>

<script>
	export default {
		name: "denglu",
		data() {
			return {
				type: 'password',
				passwordIcon: true,
				form: {
					mobile: "",
					pwd: "",
					token: "",
					deviceName: "PC",
					deviceId: "16825399703295419910",
				},
				rules: {
					mobile: {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['blur'],
					},
					pwd: {
						validator: (rule, value, callback) => {

							return this.$u.test.rangeLength(value, [6, 11])
						},
						message: '请输入6-11位的字母和数字组合',
						trigger: ['change', "blur"],
					}

				},
				yanzhengma: false,
				title: "账号密码登陆",
				switchmima: "请输入密码",
				submitbutt: {
					marginTop: '60rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					fontSize: "4.27vw",
					height: "88rpx",
					backgroundColor: "#1ba784",
					opacity: "0.5",
					border: "none"
				},
				flag: true

			}
		},
		watch: {
			form: {
				handler(n) {
					if (n.mobile && n.pwd) {
						this.submitbutt.opacity = "1"
					} else this.submitbutt.opacity = ".5"
				},
				deep: true,
				immediate: true

			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			titleswitch() {
				this.title = "验证码登陆"
				this.yanzhengma = true
				this.switchmima = "请输入验证码"
			},
			titleswitch2() {
				this.title = "账号密码登陆"
				this.yanzhengma = false
				this.switchmima = "请输入密码"
			},
			zhuce() {

				uni.navigateTo({
					url: '../register/register'
				})
			},
			switchflag() {
				console.log(this.flag)
				this.flag == true ? this.flag = false : this.flag = true
			},
			getcode() {
				console.log(1)
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');

					} else {
						console.log('验证失败');
					}
				});
			},
			login() {
				let that = this
				uni.request({
					url: "https://api.it120.cc/xiaochengxu/user/m/login",
					method: "post",
					dataType: "json",
					data: this.form,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: function(res) {
						console.log(res)
						uni.setStorageSync('token', res.data.data.token);
						that.$refs.uToast.show({
							type: 'default',
							message: "登陆成功"
						})
						setTimeout(() => {
							uni.switchTab({
								url: '../mine/mine'
							})
						}, 1500)
					}
				});



			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 60rpx;
	}

	.main {
		height: 1150rpx;

		::v-deep .u-form-item__body {
			border-bottom: 1px solid #ebedf0;
			padding: 5.33vw 0 2.67vw
		}

		::v-deep .u-input {
			padding: 0 !important
		}

		::v-deep .u-form-item__body__left {
			width: 130rpx !important;
			margin-right: 10rpx;

			::after {
				display: block;
				content: " ";
				width: 1px;
				height: 3.73vw;
				background: #ebedf0;
				position: absolute;
				top: 50%;
				margin-top: -1.87vw;
				right: 0;
			}
		}

		.switch {
			display: flex;
			justify-content: space-between;
		}

		::v-deep .u-form-item__body__right__message {
			margin-left: 0 !important;
		}

	}

	::v-deep .u-icon__icon {
		font-size: 15px !important;
	}

	.footer {
		display: flex;
		justify-content: center;
		margin-bottom: 60rpx;

		#leftcheckbox {
			border-radius: 100%;
			border: 2rpx solid;
			border: 1px solid #c8c9cc;
			width: 28rpx;
			height: 28rpx;
		}
	}

	.activebox {
		background-color: #1ba784 !important;
	}
</style>